<template>
  <div class="sale-detail pad">
    <el-page-header class="page-header" @back="goBack" :content="title">
    </el-page-header>
    <table class="info-table">
      <tbody>
        <tr>
          <td>推广人昵称:</td>
          <td>{{nickname}}</td>
        </tr>
        <tr>
          <td>推广人编号:</td>
          <td>{{openId}}</td>
        </tr>
        <tr>
          <td>总推广人数:</td>
          <td>{{personTotal}} (人)</td>
        </tr>
      </tbody>
    </table>
    <span class="span-title">推广来源分布</span>
    <el-table border stripe class="m-t-b" :data="typeList" v-loading="loading">
      <el-table-column label="推广来源" prop="picDescription"></el-table-column>
      <el-table-column label="推广人数" prop="salesmanCount"></el-table-column>
      <el-table-column label="查看推广详情">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="lookGroupDetail(scope.row)">查看推广详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span class="span-title" style="margin: 30px 0 20px 0;">{{curTip ? curTip : '推广明细'}}</span>
    <div style="color: #909399; text-align: center; margin-top: 20px;" v-if="!saledList.length">
      {{!saledList.length && '暂无数据'}}
    </div>
    <el-table border stripe :data="saledList" v-loading="detailLoading">
      <el-table-column label="推广备注">
        <template slot-scope="scope">
          {{scope.row.picDescription ? scope.row.picDescription : '暂无'}}
        </template>
      </el-table-column>
      <el-table-column label="用户编号" prop="userOpenid"></el-table-column>
      <el-table-column label="用户昵称" prop="nickname"></el-table-column>
      <el-table-column label="注册时间" prop="createDate"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="goInfo(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="m-t-b flex"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :current-page="curPage"
      :total="count">
    </el-pagination>
  </div>
</template>
<script>
import {
  getSaledList,
  getSaleGroupByRemark,
  getSaleGroupList
} from '../api';
import { formatDate } from '../util';

export default {
  name: 'saleDetail',
  props: ['id'],
  data () {
    return {
      personTotal: '--',
      nickname: '',
      openId: '',
      pageSize: 10,
      count: 0,
      curTip: '',
      loading: true,
      detailLoading: true,
      curPage: 1,
      typeList: [],
      saledList: []
    }
  },
  methods: {
    goBack () { // 返回上一页
      history.back()
    },
    goInfo (info) { // 用户详情页面
      let obj = {
        nickname: info.nickname,
        openid: info.userOpenid,
        createDate: info.createDate
      };
      sessionStorage.setItem('saleDetailPage', this.curPage);
      sessionStorage.setItem('info', JSON.stringify(obj));
      this.$router.push('/user/info')
    },
    transfer (t) {
      return formatDate(t)
    },
    lookGroupDetail (data) {
      let tip = data.picDescription;
      if (tip === this.curTip) {
        return
      };
      this.curTip = tip;
      this.fetchGroupList(1, tip, this.id ? Number(this.id) : null)
    },
    handlePagi (page) {
      this.curPage = page;
      this.fetchGroupList(page, this.curTip, this.id ? Number(this.id) : null)
    },
    fetchGroups (id, saleqrId) { // 获取推广分组信息
      this.loading = true;
      if (saleqrId) { // 新版本推广
        this.handleFetch({
          salesmanOpenid: id,
          saleqrId: saleqrId
        })
      } else { // 旧版本推广
        this.handleFetch({
          salesmanOpenid: id,
          saleqrId: saleqrId
        })
      }
    },
    handleFetch (data) {
      getSaleGroupByRemark(data)
      .then(res => {
        this.loading = false;
        if (res.data.code === 1) {
          let total = 0;
          let list = res.data.data;
          for (let i = 0; i < list.length; i ++) {
            total += list[i].salesmanCount
          };
          this.personTotal = total;
          this.typeList = list.sort((a, b) => b - a);
          if (this.typeList.length) {
            this.curTip = this.typeList[0].picDescription;
            let page = sessionStorage.getItem('saleDetailPage') || 1;
            this.curPage = Number(page);
            this.fetchGroupList(Number(page), this.curTip, this.id ? Number(this.id) : null);
            sessionStorage.removeItem('saleDetailPage')
          } else {
            this.detailLoading = false
          }
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
      })
      .catch(e => {
        this.loading = false;
        this.$message.error('网络异常!')
      })
    },
    fetchGroupList (index, tip, saleqrId) { // 查看推广详细列表
      this.detailLoading = true;
      let that = this;
      getSaleGroupList({
        index,
        count: that.pageSize,
        queryParam: {
            salesmanOpenId: that.openId, //用户id
            picDescription: tip, //图片描述
            saleqrId: saleqrId
        }
      })
      .then(res => {
        this.detailLoading = false;
        if (res.data.code === 1) {
          let list = res.data.data.list;
          that.count = res.data.data.totalRecord;
          for (let i = 0; i < list.length; i ++) {
            list[i].createDate = formatDate(list[i].createDate, 'ZH')
          };
          that.saledList = list
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
      })
      .catch(e => {
        this.detailLoading = false;
        this.$message.error('网络异常!')
      })
    }
  },
  // beforeRouteEnter (to, from, next) {
  //   console.log(to, from);
  //   next();
  //   console.log(this.curPage)
  // },
  created () {
    // console.log(this.$route, this.$router);
    let page = sessionStorage.getItem('saleDetailPage') || 1;
    this.curPage = Number(page);
    let path = this.$route.meta.path;
    this.title = path[path.length - 1];
    let saleInfo = sessionStorage.getItem('saleInfo');
    saleInfo = JSON.parse(saleInfo);
    this.nickname = saleInfo.nickname;
    this.openId = saleInfo.openId;
    // this.fetchSaledList(this.openId);
    this.fetchGroups(this.openId, this.id ? Number(this.id) : null)
  }
}
</script>
<style lang="scss">
  .sale-detail {
    .info-table {
      margin: 10px auto;
      width: 400px;
      border-radius: 6px;
      background-color: #f8f8f8;
      td {
        padding: 10px 25px;
        color: #242424;
      }
    }
    table {
      .cell {
        text-align: center;
      }
    }
    .span-title {
      display: inline-block;
      padding: 8px 20px;
      background-color: #4AC493;
      color: #ffffff;
      font-weight: bold;
      font-size: 16px;
      border-top-right-radius: 40px;
      border-bottom-right-radius: 40px;
    }
  }
</style>
